<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-family: "微软雅黑";
			}
			
			body {
				text-align: center;
			}
			
			#main_long {
				width: 1200px;
				/*border: 1px solid;*/
				margin: 0 auto;
			}
			
			#top_long {
				height: 100px;
			}
			
			#logo_long {
				height: 63px;
				width: 309px;
				position: relative;
				background-size: contain;
				background-image: url(img/shouye/logo.png);
				background-repeat: no-repeat;
				top: 12.5px;
				left: 0px;
			}
			
			#logo1_long {
				height: 40px;
				width: 180px;
				border-left: 1px solid #999999;
				position: absolute;
				top: 40px;
				left: 235px;
			}
			
			#logo1_long p {
				color: #999999;
			}
			
			#topright_long {
				/*border: 1px solid;*/
				width: 300px;
				height: 20px;
				position: absolute;
				top: 45px;
				left: 950px;
			}
			
			#topright_long table td {
				width: 100px;
			}
			
			#topright_long table a {
				text-decoration: none;
				color: #9F9F9F;
				font-size: 12px;
			}
			
			.hr {
				width: 100%;
				height: 2px;
				border: none;
				border-top: 2px solid #CC3333;
			}
			
			#middle_long {
				width: 1200px;
				margin: 0 auto;
				/*border: 1px solid;*/
				height: 520px;
			}
			
			#youxiangzhuce {
				width: 1200px;
				height: 70px;
				border: 1px solid;
				line-height: 70px;
				position: absolute;
				/*left: 600px;*/
				border-left: 0px;
				border-right: 0px;
				border-top: 0px;
				border-bottom: 2px solid #DDDDDD;
				color: #F04E00;
			}
			
			.table table {
				width: 500px;
				height: 300px;
				font-size: 12px;
				position: absolute;
				left: 510px;
				margin-top: 100px;
			}
			
			.table tr {
				width: 250px;
				margin-top: 5px;
			}
			
			.table table tr td:nth-child(1) {
				float: right;
				/*width: 50px;*/
				line-height: 53px;
			}
			
			.table table input {
				width: 212px;
				height: 28px;
				outline: none;
			}
			
			.table>table input:focus {
				border: 1px solid #CC3333;
			}
			
			.table .chexbox>input {
				width: 15px;
				position: relative;
				top: 10px;
			}
			
			.lh_long {
				line-height: 37px;
				margin-left: 5px;
			}
			
			.lh_long>a {
				text-decoration: none;
			}
			
			#button_long {
				position: relative;
				top: 450px;
				left: 0px;
			}
			
			#button_long>input {
				width: 60px;
				height: 30px;
				border: 0px;
				outline: none;
			}
			#middle_long .mystyle>input:hover {
				border: 1px solid #CC3333;
			}
			#middle_long .mystyle>input:active {
				background-color: #CC3333;
			}
			
			#bottom_long {
				margin: 0 auto;
				font-size: 12px;
				color: #9F9F9F;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
	</head>

	<body>
		<div id="main_long">
			<div id="top_long">
				<div id="logo_long">

				</div>
				<!--<div id="logo1_long" class="pl5">
					<p>购在全球 我们只做洋货</p>
					<p>ymatou.com</p>
				</div>-->
				<div id="topright_long">
					<table border="0">
						<tr>
							<td>
								<a href="denglu_dj.html">请登录</a>
							</td>
							<td>
								<a href="zhuce.html">快速注册</a>
							</td>
							<td>
								<a href="index.html">我的码头</a>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<hr class="hr" />
		<div id="middle_long">
			<div id="youxiangzhuce">
				<p class="fb">邮箱注册</p>
			</div>
			<div class="table">
				<table border="0" cellspacing="" cellpadding="">
					<tr>
						<!--<td>邮箱：</td>
						<td align="left"><input type="email" name="" id="" value="" placeholder="请输入邮箱地址"/></td>
						<td style="width: 200px;"></td>-->
						<td>邮箱:</td>
						<td align="left">
							<input id="email" type="text" class="input-text" value="" />
						</td>
						<td>
							<span id="block5">重要，请填写正确的邮箱，格式如：13102055888@163.com</span>
						</td>
					</tr>
					<tr>
						<!--<td>昵称：</td>
						<td align="left"><input type="text" name="" id="" value=""  placeholder="请输入昵称"/></td>
						<td></td>-->
						<td>昵称:</td>
						<td align="left">
							<input type="text" id="nc" class="input-text" value="" />
						</td>
						<td>
							<span id="block4">作为昵称以浏览本网站</span>
						</td>
					</tr>
					<tr>
						<!--<td>用户名：</td>
						<td align="left"><input type="text" name="" id="" value="" placeholder="请输入用户名"/></td>
						<td></td>-->
						<td class="w50">用户名:</td>
						<td id="mume" align="left">
							<input type="text" class="input-text" id="yonghu" value="" />
						</td>
						<td>
							<span id="block1">请设置登录用户名，由大小写英文字母、数字和下划线组成，长度4-20位。</span>
						</td>
					</tr>
					<tr>
						<!--<td>密码：</td>
						<td align="left"><input type="password" name="" id="" value="" placeholder="请输入密码"/></td>
						<td></td>-->
						<td>密码:</td>
						<td align="left">
							<input id="pwd" type="password" class="input-text" value="" />
						</td>
						<td class="width-140">
							<span id="block2">设置您的登录密码</span>
						</td>
					</tr>
					<tr>
						<!--<td class="w100" align="right">确认密码：</td>
						<td align="left"><input type="password" name="" id="" value="" placeholder="请输入确认密码"/></td>
						<td></td>-->
						<td class="w60" align="right">确定密码:</td>
						<td align="left">
							<input type="password" class="input-text" id="pwds" value="" />
						</td>
						<td>
							<span id="block3"> 重新输入登录密码，以确保您的输入正确</span>
						</td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2" align="left" class="chexbox"><input type="checkbox" name="" id="" value="" checked="checked" /><span class="lh_long">我已认真阅读并同意洋码头的《<a href="#">用户协议</a>》</span></td>
					</tr>
				</table>

			</div>
			<div id="button_long" class="mystyle">
				<input type="button" id="zhuce" value="注册" />
			</div>
		</div>
		<div id="bottom_long">
			<p class="mt5"> &copy;2009－2018 ymatou.com, All rights reserved 增值电信业务经营许可证：沪B2-20140021 41 </p>
			<p class="mt5">上海洋码头网络技术有限公司 版权所有 </p>
			<p class="mt5">上海市灵石路695号3号楼1404室</p>
		</div>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="js/init.js" type="text/javascript" charset="utf-8"></script>-->
		<script type="text/javascript">
			var yh = $("#yonghu");
			var reg = /^\w{4,20}$/;
			var t1 = false;
			var t2 = false;
			var t3 = false;
			var t4 = false;
			var t5 = false;
			yh.blur(function() {
				$("#block1").html(yh.val() == "" ? "<img align='center' src='img/zhuce_longbo/onError.gif' />不能为空" : (reg.test(yh.val()) == false ? "<img align='center' src='img/zhuce_longbo/onError.gif' />用户名输入不正确" : "<img align='center' src='img/zhuce_longbo/onsuccess.gif' />"));
				yh.val() == "" ? t1 = false : (reg.test(yh.val()) == false ? t1 = false : t1 = true);
			});
			var pwd = $("#pwd");
			var rew = /([0-9]{4,12}|[A-Za-z]{4,12})$/
			pwd.blur(function() {
				$("#block2").html(pwd.val() == "" ? "<img align='center' src='img/zhuce_longbo/onError.gif' />请输入6-12位数字或字母组成的密码！" : (rew.test(pwd.val()) == false ? "<img align='center' src='img/zhuce_longbo/onError.gif' />密码格式不符合！" : "<img align='center' src='img/zhuce_longbo/onsuccess.gif' />"));
				pwd.val() == "" ? t2 = false : (rew.test(pwd.val()) == false ? t2 = false : t2 = true);
			});
			var pwds = $("#pwds");
			pwds.blur(function() {
				$("#block3").html(pwds.val() == "" ? "<img align='center' src='img/zhuce_longbo/onError.gif' />确认密码不能为空！" : ((pwds.val() == pwd.val()) ? "<img align='center' src='img/zhuce_longbo/onsuccess.gif' />" : "<img align='center' src='img/zhuce_longbo/onError.gif' />密码格式不相同！"));
				pwds.val() == "" ? t3 = false : (rew.test(pwds.val()) == false ? t3 = false : t3 = true);
			});
			var nc = $("#nc");
			var ret = /^[\u4e00-\u9fa5]+|[A-za-z]{4,6}$/;
			nc.blur(function() {
				$("#block4").html(nc.val() == "" ? "<img align='center' src='img/zhuce_longbo/onError.gif' />昵称是必填项！" : (ret.test(nc.val()) == false ? "<img align='center' src='img/zhuce_longbo/onError.gif' />昵称格式不符合！" : "<img align='center' src='img/zhuce_longbo/onsuccess.gif' />"));
				nc.val() == "" ? t4 = false : (ret.test(nc.val()) == false ? t4 = false : t4 = true);
			});
			var em = $("#email");
			var ems = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			em.blur(function() {
				$("#block5").html(em.val() == "" ? "<img align='center' src='img/zhuce_longbo/onError.gif' />邮箱不能为空！" : (ems.test(em.val()) == false ? "<img align='center' src='img/zhuce_longbo/onError.gif' />邮箱格式不符合！" : "<img align='center' src='img/zhuce_longbo/onsuccess.gif' />"));
				em.val() == "" ? t5 = false : (ems.test(em.val()) == false ? t5 = false : t5 = true);
			});

			

			$("#zhuce").on("click", function() {
				$("#zhuce").attr("disabled", "disabled")
				var username = $('#yonghu').val();
				var password = $('#pwd').val();
				var email = $('#email').val();
				var nicheng = $("#nc").val();
				var user = new AV.User();
//				if(t1 == true && t2 == true && t3 == true && t4 == true && t5 == true) {
					$.ajax({
						type: "POST",
						url: "https://leancloud.cn:443/1.1/users",
						data: '{"username":"' + email + '","password":"' + password + '","nicheng":"' + nicheng + '"}',
						contentType: "application/json",
						headers: {
							"X-LC-Id": "BYEEeow0Ql9t5CRVSdo8RhXi-gzGzoHsz",
							"X-LC-Key": "jY0lxpa4tnmROiovzkjtoama"
						},
						success: function(data) {
							alert("注册成功");
							location.href="denglu_dj.html";
						},
						error: function(data) {
							alert("注册失败1")
							window.location.reload();
						}
					})
//				} else {
//					alert("注册失败2")
//					window.location.reload();
//				}

			});
		</script>

	</body>

</html>